<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<!-- 元素中的属性称之为attribute -->
		<!-- 标准的attribute在对应的对象模型中都有对应的property -->
		<div id="abc" class="box" age="1.22" height="121">我是box</div>

		<input type="checkbox" name="" id="" checked />
		<button class="btn">按钮</button>
		<script>
			// 对象中属性称之为property
			// var obj = {
			//   // property
			//   name: 'abc'
			// }

			var boxEl = document.querySelector('.box')
			console.log('boxEl.id, boxEl.age:', boxEl.id, boxEl.age)

			var inpEl = document.querySelector('input')
			// 使用getAttribute(): 获取的是字符串
			/* if (inpEl.getAttribute('checked')) {
				console.log('当前状态为选中')
			} */

			if (inpEl.checked) {
				console.log('当前状态为选中')
			}

			// 2. attribute 和 property 是相互影响的
			boxEl.id = 'aaaa'
			console.log(boxEl.getAttribute('id'))
		</script>
	</body>
</html>
